<template>
    <div class="radio-card" :class="{ 'is-selected': isSelected }" @click="handleClick">
        <slot>
            <div class="card-info">
                <div class="title">
                    {{ option.label }}
                </div>
                <div class="desc">
                    {{ option.desc }}
                </div>
            </div>
        </slot>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    option: {
        value: string | number;
        label: string;
        desc?: string;
    };
    modelValue: string | number;
}

const props = defineProps<Props>();
const emit = defineEmits(['update:modelValue', 'change']);

const isSelected = computed(() => props.modelValue === props.option.value);

const handleClick = () => {
    const newValue = props.option.value;
    if (newValue === props.modelValue) return;
    emit('update:modelValue', newValue);
    emit('change', newValue);
};
</script>

<style scoped>
.radio-card {    
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    overflow: hidden;
    display: inline-flex;    
    flex-direction: column;       
    .card-info{
        width: 200px;
        border-radius: 8px;
        border: 1px solid var(--el-border-color-lighter);
    }
    .title{
        padding: 0 20px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 13px;
        font-weight: 600;
        background-color: var(--el-color-info-light-8);
    }
    .desc{
        padding: 0 20px;
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: var(--el-text-color-secondary);
    }
}

.radio-card.is-selected {    
    border-color: var(--el-color-primary);
    .title{        
        background-color: var(--el-color-primary);
        color: white;
    }
}

.radio-card:hover {
    border-color: var(--el-color-primary);;
}
</style>